﻿
@{
    ViewBag.Title = Model.shop_name;
    Layout = "~/Views/Shared/_MallLayout.cshtml";
    string img_url = ViewBag.img_url;
    merchant_dto merchant = ViewBag.merchant as merchant_dto;
    red_user_dto redcord = ViewBag.redcord as red_user_dto;
    long shop_id = ViewBag.shop_id;
}
@section style{
    <link href="~/Scripts/mescroll/mescroll.min.css" rel="stylesheet" />
    <style type="text/css">
        .mescroll {
            position: fixed;
            top: 0;
            bottom: 0;
            height: auto;
        }
    </style>
}
@model shop_info_dto
<body class="page-index page-shop ">
    @{ string style = "background-image:url(" + (img_url + Model.shop_background_img) + ");background-size: 100% 100%; ";
    }
    <div class="mescroll" id="mescroll">
        <div class="shop-title" style="margin-top:0; @(!string.IsNullOrEmpty(Model.shop_background_img)?style:"")">
            <div class="shop-name">
                <div class="invita">
                    <img src="@(img_url+Model.shop_logo)" alt="" />
                    <div class="intro">
                        <h2>@Model.shop_name</h2>
                        <span>
                            @Model.remark
                        </span>
                    </div>
                </div>
                @*<span class="shared fxShop"><i class="icon-share"></i></span>*@
            </div>
            <div class="search">
                <div class="box">
                    <a href="javascript:;" class="searchBtn search_btn">
                        <i class="icon-search"></i>
                    </a>
                    <form action="javascript:void(0);">
                        @*<input class="searchInput" type="search" placeholder="请输入需要搜索的商品" id="keyword">*@
                        <span class="col-gray searchInput search_btn">请输入需要搜索的商品</span>
                    </form>
                </div>
            </div>
        </div>
        <!-- 分类 -->
        <div class="mod-type mod-typeTab">
            <ul class="shop_tab">
                <li class="cur" value="4">
                    全部
                </li>
                <li value="1">
                    销量
                </li>
                <li value="4">
                    最新
                </li>
            </ul>
        </div>
        <div class="mod-fallsceshi mt20">
            <div class="masonry" id="dataList">
            </div>
        </div>
        <a class="goTop">
            <img src="~/Content/css/tokenmall/img/icon/goTop.png" />
        </a>
    </div>
    <!-- 分享 -->
    <!-- <div class="black trans_3">
        <span class="img"><img src="asset/dest/img/share.jpg" alt=""></span>
    </div> -->
    @*<div class="mod-popFx popFx trans_5 j-shareShop">
            <i class="icon-close2 j-close"></i>
            <div class="popView">
                <div class="top">
                    <img src="asset/dest/img/share.jpg" alt="">
                </div>
            </div>
            <div class="tbnBox">
                <input id="foo" type="text" value="hello">
                <a class="btn j-copy" data-clipboard-text="1111111" href="javascript:;">复制商品链接</a>
                <a class="btn" href="#">下载图片</a>
            </div>
        </div>*@
    <div class="mod-popFx popFx trans_5 j-sharePro">
        <i class="icon-close2 j-close"></i>
        <div class="popView">
            <div class="top">
                <img src="" alt="" id="popimg">
            </div>
        </div>
        <div class="tbnBox">
            <input class="share_code fn-hide" readonly="readonly" id="foo" value="">
            <a class="btn j-copy2" data-clipboard-action="copy" href="javascript:;" data-clipboard-target="#foo">复制商品链接</a>
            <a class="btn" href="#" id="saveimg" download="">下载图片</a>
        </div>
    </div>
    <script src="~/Scripts/tokenmall/masonry-docs.min.js"></script>
    <script src="~/Scripts/tokenmall/imagesloaded.min.js"></script>
    <script src="~/Scripts/mescroll/mescroll.min.js"></script>
    <script src="~/Scripts/clipboard.min.js"></script>
    <script src="~/Scripts/token-common.js"></script>
    <script type="text/javascript">
        $(function () {
            var sort = 4;
            var $container = $('.masonry');
            var total_pages = 1;
            var isload = false;
            var dataUrl = '/ShopInfo/_Myshop';
            var mescroll = new MeScroll("mescroll", {
                down: {
                    auto: false,
                    callback: function (mescroll) {
                        $container.html('');
                        $container.masonry('layout');
                        mescroll.resetUpScroll();
                    }
                },
                up: {
                    callback: askData,
                    page: { num: 0, size: 6 },
                    clearEmptyId: "dataList",
                    isBounce: false,
                    noMoreSize: 3,
                    htmlNodata: '<p class="upwarp-nodata">亲,我是有底线的~</p >',
                    empty: { warpId: "dataList", icon: "", tip: "亲,暂时没有数据哦~" }
                }
            });
            //异步请求数据
            function askData(pager) {
                if (!isload && total_pages >= pager.num) {
                    isload = true;
                    $.ajax({
                        type: "post",
                        url: dataUrl,
                        params: "contentType",
                        data: { page: pager.num, size: pager.size, sort: sort, shop_id: '@shop_id' },
                        success: function (res) {
                            var $elems = $(res);
                            var paged = $elems.siblings("page");
                            var rows = Number.parseInt(paged.attr("rows"));
                            var total = Number.parseInt(paged.attr("total_result"));
                            mescroll.endBySize(rows, total);
                            if (paged.length == 1) {
                                total_pages = Number.parseInt(paged.attr("total_pages"));
                                msnryobj.masonryImagesReveal($elems);
                                $('#dataList page').remove();
                            } else {
                                $(".upwarp-nodata").html('亲,暂时没有数据哦~');
                            }
                            isload = false;
                        },
                        error: function (err) {
                            isload = false;
                            mescroll.endErr();
                        }
                    });
                }
            }
            var width = $container.width() / 2;
            var msnryobj = $container.masonry({ itemSelector: '.item', gutter: 0, columnWidth: width, isAnimated: true });
            $.fn.masonryImagesReveal = function ($items) {
                var msnry = this.data('masonry');
                var itemSelector = msnry.options.itemSelector;
                $items.hide();
                this.append($items);
                $items.imagesLoaded().progress(function (imgLoad, image) {
                    var $item = $(image.img).parents(itemSelector);
                    $item.show();
                    msnry.appended($item);
                });
                return this;
            };

            $("#dataList .item").delegate("a", "click", function (e) {
                e.stopPropagation();
            });
            $("#dataList").delegate(".fxPro", "click", function (e) {
                e.preventDefault();
                if (@merchant.id<= 0) {
                    var loginResult = isLogin();
                    if (!loginResult)
                        return loginResult;
                    location.href = "/home/login?returnUrl=@Request.Url"; return;
                }
                var that = $(this);
                var obj = {};
                obj.name =@merchant.id> 0 ? '@merchant.name' : '';
                @{   string head_img = (string.IsNullOrEmpty(merchant.photo) ? "http://" + Request.Url.Authority + "/Content/images/my/icon.png" : string.Format("{0}{1}", img_url, merchant.photo));}
                obj.head_img_url = @merchant.id> 0 ? '@head_img' : '';
                obj.main_image_url = that.attr('data-main_image_url');
                obj.title = that.attr('data-name');
                obj.cost_price = that.attr('data-cost-price');
                obj.price = that.attr('data-price');
                obj.invitation_code = '@redcord.invitation_code';
                var url = 'http://' + '@Request.Url.Authority' + '/DistributionMall/ProductDetail?productId=' + that.attr('data-id');
                obj.share_url = @merchant.id> 0 ? url + '&merchant_no=' + '@merchant.merchant_no' : url;
                try {
                    var data = JSON.stringify(obj);
                    if (browser.versions.ios) {
                        if (isIOSAppNewBrowser != undefined && isIOSAppNewBrowser == true) {
                            window.webkit.messageHandlers.commodityShare.postMessage(data);
                        } else {
                            commodityShare(data)
                        }
                    } else if (browser.versions.android) {
                        androidfuntion.commodityShare(data)
                    }
                } catch (e) {
                    //$('.black').addClass('cur');
                    $('.popFx').animate({ bottom: "0" });
                    var img_url = '/DistributionMall/ImageMerge?product_id=' + that.attr('data-id');
                    img_url =@merchant.id> 0 ? img_url + '&merchant_no=' + '@merchant.merchant_no' : img_url;
                    $("#popimg").attr('src', img_url);
                    $('.share_code').val(obj.share_url);
                    $("#saveimg").attr('href', img_url);
                    $("#saveimg").attr('download', obj.name + '.jpg');
                }
            });
            // 分享店铺
            $('.fxShop').click(function () {
                $('.j-shareShop').animate({ bottom: "0" });
            });
            $('.j-shareShop .j-close').click(function () {
                $('.j-shareShop').animate({ bottom: "-100%" });
            })
            // 分享商品
            $('.fxPro').click(function () {
                $('.j-sharePro').animate({ bottom: "0" });
            });
            $('.j-sharePro .j-close').click(function () {
                $('.j-sharePro').animate({ bottom: "-100%" });
            })

            var clipboard1 = new ClipboardJS('.j-copy');
            var clipboard2 = new ClipboardJS('.j-copy2');
            clipboard1.on('success', function (e) {
                console.log(e);
            });
            clipboard1.on('error', function (e) {
                console.log(e);
            });
            clipboard2.on('success', function (e) {
                console.log(e);
            });
            clipboard2.on('error', function (e) {
                console.log(e);
            });
            $('.shop_tab li').click(function () {
                sort = $(this).val();
                $(this).addClass('cur').siblings().removeClass('cur');
                $container.html('');
                $container.masonry('layout');
                //重置列表数据
                mescroll.resetUpScroll();
                //隐藏回到顶部按钮
                mescroll.hideTopBtn();
            })
            $(".search_btn").click(function () {
                location.href = '/DistributionMall/Search?shop_id=@shop_id';
            });
        });
    </script>
</body>

